<template>
	<view class="order_main">
		<view class="body-view">
			<scroll-view
				class="top-menu-view"
				scroll-x="true"
				:scroll-into-view="tabCurrent"
				:scroll-with-animation="true"
			>
				<view class="" style="display: flex; justify-content: space-around">
					<view
						class="menu-topic-view"
						v-for="(item, index) in tabsList"
						:id="'tabNum' + (index + 1)"
						:key="index"
						@click="swichMenu(index)"
					>
						<view :class="currentTab == index ? 'menu-topic-act' : ''">
							<text class="menu-topic-text">{{ item.name }}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 内容 -->
			<view class="scroll_content">
				<scroll-view class="scroll-view_list" scroll-y="true">
					<!-- 使用scroll-view实现tabs滑动切换 状态-->

					<view class="" style="padding: 10rpx 24rpx">
						<view class="hint_text">
							如需添加多台商品，请在输入框里继续添加
						</view>
						<view class="swiper-box-list">
							<view class="pag_bottom" v-if="currentTab == 0">
								<view class="truth">
									<p class="text_top_popup">请输入商品序列号</p>
									<uni-easyinput
										suffixIcon="scan"
										@confirm="addCode()"
										placeholderStyle="font-size:28rpx;"
										@input="
											nextTick(
												() =>
													(truthCode = truthCode.replace(
														/[\u4e00-\u9fa5]/g,
														'',
													)),
											)
										"
										v-model="truthCode"
										placeholder="请输入商品序列号或扫描条形码/二维码"
										@iconClick="iconClick"
									></uni-easyinput>
									<button class="onlogout" @click="addCode()">
										<span>
											{{
												repairGoodsVos.repairGoodsVos.length > 0
													? '继续添加'
													: '添加'
											}}
										</span>
									</button>
								</view>
							</view>
							<view class="pag_bottom" v-if="currentTab == 1">
								<view class="fac_header_add" @click="selectGoods">
									<uni-icons
										size="18"
										color="#007cff"
										type="plus-filled"
									></uni-icons>
									<span>添加报修商品</span>
								</view>
							</view>
						</view>

						<view class="centent_bgBox">
							<uni-forms
								ref="formRef"
								label-width="150"
								:modelValue="repairGoodsVos"
							>
								<view
									class="item_fee"
									v-for="(item, index) in repairGoodsVos.repairGoodsVos"
									:key="index"
								>
									<view class="item_fee_tableHead">
										<view
											class="item_fee_tableHead_left"
											@click="item.isShow = !item.isShow"
										>
											<span
												:class="item.isShow ? 'down_up_' : 'down_up'"
											></span>
											商品{{ index + 1 }}
										</view>
										<uni-icons
											@click="deleteFun(index)"
											type="minus-filled"
											color=" rgba(245, 108, 108, 1)"
											size="24"
										></uni-icons>
									</view>
									<uni-forms-item label="商品名称">
										<view class="item_content">
											<span class="content_name">{{ item.goodsName }}</span>
										</view>
									</uni-forms-item>
									<uni-forms-item label="商品规格">
										<view class="item_content">
											<span class="content_name">{{ item.goodsSpecName }}</span>
										</view>
									</uni-forms-item>
									<uni-forms-item label="商品序列号" v-if="item.code">
										<view class="item_content">
											<span class="content_name">{{ item.code }}</span>
										</view>
									</uni-forms-item>
									<uni-forms-item label="客户信息" v-if="item.register">
										<view class="sel_address" style="padding-left: 50rpx">
											<view>
												<view
													class="tipadd"
													style="align-items: center; column-gap: 12rpx"
												>
													<span class="user_name">{{ item.userName }}</span>
													<span>{{ item.userPhone }}</span>
												</view>
												<view
													style="
														word-wrap: break-word;
														word-break: break-all;
														text-align: right;
													"
												>
													<span style="color: #777; font-size: 24rpx">
														{{
															[
																item.province,
																item.city,
																item.area,
																item.address,
															]
																.filter((o) => o)
																.join('')
														}}
													</span>
												</view>
											</view>
										</view>
									</uni-forms-item>
									<view v-if="!item.isShow">
										<uni-forms-item
											label=""
											:name="['repairGoodsVos', index, 'descr']"
											:rules="[{required: true, errorMessage: '填写故障描述'}]"
										>
											<span style="color: #606266; font-size: 28rpx">
												<span style="color: #f56c6c; font-weight: bold">*</span>
												故障描述
											</span>
											<view class="text_input">
												<uni-easyinput
													type="textarea"
													:inputBorder="false"
													placeholderStyle="font-size:28rpx;"
													:maxlength="100"
													v-model="item.descr"
													placeholder="填写故障描述"
												></uni-easyinput>
												<view class="coun">{{ item.descr.length }}/100</view>
											</view>
										</uni-forms-item>
										<uni-forms-item>
											<view class="pic_img">
												<uni-file-picker
													@select="(files) => onsuccessImg(files, index)"
													title="上传图片"
													limit="8"
													:auto-upload="false"
													@delete="(file) => ondeleteImg(file, index)"
													file-extname="jpg,jpeg,png"
													:imageStyles="imageStyles"
													file-mediatype="image"
													v-model="item.imgarr"
												/>
											</view>
										</uni-forms-item>
										<uni-forms-item>
											<view style="color: #606266; font-size: 28rpx; margin-bottom: 10rpx;">
												上传视频
											</view>
											
											<!-- 视频预览 -->
											<view
												class="video-preview-container"
												v-if="
													repairGoodsVos.repairGoodsVos[index].videoPaths[0]
												"
												@click="onVideoPreview(index)"
											>
												<video
													:controls="false"
													:show-center-play-btn="false"
													class="content"
													:src="
														repairGoodsVos.repairGoodsVos[index].videoPaths[0]
													"
												></video>
												
												<view class="del-icon" @click.stop="handleVideoDel(index)">
													<uni-icons type="closeempty" color="#fff" :size="16"></uni-icons>
												</view>
											</view>
											
											<!-- 上传视频 -->
											<view
												class="video-upload-container"
												v-else
												@click="onUploadVideo(index)"
											>
												<uni-icons
													type="cloud-upload"
													color="#999"
													:size="24"
												></uni-icons>
											</view>
										</uni-forms-item>
									</view>
								</view>
							</uni-forms>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="footer_order">
				<view class="footer_order_left">
					已添加
					<p class="gray_tip">{{ repairGoodsVos.repairGoodsVos.length }}</p>
					台
				</view>
				<view class="footer_order_right" @click="confirmGoods">
					<view class="btn">确认添加</view>
				</view>
			</view>
		</view>

		<!-- 视频预览弹窗 -->
		<uni-popup ref="videoPreviewPopup" type="center">
			<video :src="videoPreviewUrl"></video>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted, reactive, watch, nextTick} from 'vue';
	import {onUnload, onShow, onLoad, onHide} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import store from '@/store/index.js';
	import apiOrder from '@/util/api/order';

	// 视频预览地址
	const videoPreviewUrl = ref('');
	
	// 视频预览弹窗组件实例
	const videoPreviewPopup = ref();
	
	/**
	 * 上传视频
	 */
	const onUploadVideo = (index: number) => {
		uni.chooseVideo({
			sourceType: ['album'],
			success: (res) => {
				repairGoodsVos.value.repairGoodsVos[index].videoPaths = [
					res.tempFilePath,
				];
			},
		});
	};
	
	/**
	 * 视频删除事件
	 * @param {Number} index - 商品索引
	 */
	const handleVideoDel = (index: number) => {
		repairGoodsVos.value.repairGoodsVos[index].videoPaths.length = 0
	}
	
	/**
	 * 视频预览事件
	 */
	const onVideoPreview = (index) => {
		if (videoPreviewPopup.value) {
			const good = repairGoodsVos.value.repairGoodsVos[index];
			videoPreviewUrl.value = good.videoPaths[0];
			videoPreviewPopup.value.open();
		}
	};

	const tabsList = ref([
		{status: 1, name: '添加商品序列号'},
		{status: 2, name: '添加无条码商品'},
	]);
	const truthCode = ref('');
	const currentTab = ref(0); //当前标题index
	const tabCurrent = ref('tabNum0');
	// Tab切换内容
	async function swichMenu(index: number) {
		currentTab.value = index;
		tabCurrent.value = 'tabNum' + index;
	}
	const repairGoodsVos = ref({
		repairGoodsVos: [],
	});
	// 自定义图片样式
	const imageStyles = {
		height: 80, // 边框高度
		width: 80, // 边框宽度
		border: {
			// 如果为 Boolean 值，可以控制边框显示与否
			color: '#eee', // 边框颜色
			width: '1px', // 边框宽度
			style: 'solid', // 边框样式
		},
	};
	// 选择视频
	const onChooseVideo = (file, index) => {
		if (file.tempFiles[0].size > 31457280) {
			uni.showToast({
				icon: 'none',
				title: `视频超过限制大小30MB`,
			});
		} else {
			repairGoodsVos.value.repairGoodsVos[index].videoPaths = [
				file.tempFiles[0],
			];
		}
	};

	const formRef = ref();
	// 删除
	const deleteFun = (index) => {
		repairGoodsVos.value.repairGoodsVos.splice(index, 1);
	};
	const addCode = _.debounce(
		async () => {
			if (!truthCode.value.trim()) {
				uni.showToast({
					title: '请先输入条码！',
					icon: 'none',
				});
				return;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			await apiOrder
				.getUserOrderCodeInfo({code: truthCode.value})
				.then((res) => {
					if (res.code == 20000) {
						if (
							repairGoodsVos.value.repairGoodsVos.some(
								(o) => o.code == res.data.row.code,
							)
						) {
							uni.showToast({
								icon: 'none',
								title: '该商品序列号已存在',
							});
							return;
						}
						let item = {
							videoPaths: [], // 视频
							code: res.data.row.code,
							descr: '',
							goodsId: res.data.row.goodsId,
							goodsName: res.data.row.goodsName,
							goodsSpecId: res.data.row.goodsSpecId,
							goodsSpecName: res.data.row.goodsSpecName,
							paths: [],
							isShow: false,
							imgarr: [],
							// 客户信息
							register: res.data.row.register,
							userPhone: res.data.row.userPhone,
							userName: res.data.row.userName,
							province: res.data.row.province,
							city: res.data.row.city,
							area: res.data.row.area,
							town: res.data.row.town,
							address: res.data.row.address,
						};
						repairGoodsVos.value.repairGoodsVos.push(item);
						repairGoodsVos.value.repairGoodsVos =
							repairGoodsVos.value.repairGoodsVos.map((o) => {
								if (o.descr && o.imgarr.length > 0) {
									o.isShow = true;
								}
								return o;
							});
						truthCode.value = '';
					}
				});
			uni.hideLoading();
		},
		800,
		{leading: false},
	);
	// 调起客户端扫码界面，扫码成功后返回对应的结果。
	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'], //扫码类型
			success: async function (res) {
				truthCode.value = res.result;
				addCode();
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000,
				});
				// #endif
			},
		});
	};
	const onsuccessImg = (files, index) => {
		files.tempFiles.map((o) => {
			repairGoodsVos.value.repairGoodsVos[index].imgarr.push(o);
		});
	};
	const selectGoods = () => {
		store.commit('set_SelectVoGoods', []);
		uni.navigateTo({
			url: `/pages_user/return_factory/select_goods`,
		});
	};
	const ondeleteImg = (file, index) => {
		repairGoodsVos.value.repairGoodsVos[index].imgarr =
			repairGoodsVos.value.repairGoodsVos[index].imgarr.filter((o) => {
				return o.uuid != file.tempFile.uuid;
			});
	};
	const confirmGoods = async () => {
		if (repairGoodsVos.value.repairGoodsVos.length == 0) {
			uni.showToast({
				icon: 'none',
				title: '请添加商品',
				duration: 3000,
			});
			return;
		}
		let result = repairGoodsVos.value.repairGoodsVos.some(
			(o) => !o.descr && o.isShow,
		);
		let result2 = repairGoodsVos.value.repairGoodsVos.some(
			(o) => o.imgarr.length == 0 && o.isShow,
		);
		if (result) {
			let num = repairGoodsVos.value.repairGoodsVos.findIndex(
				(o) => !o.descr && o.isShow,
			);
			uni.showToast({
				title: `商品${num + 1}--请填写故障描述`,
				icon: 'none',
				duration: 2000,
			});
			return;
		}
		// if (result2) {
		// 	let num=repairGoodsVos.value.repairGoodsVos.findIndex(o => o.imgarr.length == 0&&o.isShow)
		// 	uni.showToast({
		// 		title: `商品${num+1}--请上传图片`,
		// 		icon: 'none',
		// 		duration:2000
		// 	})
		// 	return
		// }
		await formRef.value
			?.validate()
			.then((res) => {
				store.commit('setrepairGoodsVos', repairGoodsVos.value.repairGoodsVos);
				uni.navigateBack();
			})
			.catch((err) => {
				let str = err.map((o) => o.errorMessage);
				uni.showToast({
					title: str[0],
					icon: 'none',
					duration: 2000,
				});
			});
	};
	onLoad(async () => {
		repairGoodsVos.value.repairGoodsVos = _.cloneDeep(
			store.state.repairGoodsVos,
		);
	});
	watch(
		() => store.state.selectVoGoods,
		(n) => {
			if (n.length > 0) {
				store.state.selectVoGoods.forEach((item) => {
					const good = repairGoodsVos.value.repairGoodsVos.find(
						(goodVo) =>
							goodVo.goodsId === item.goodsId &&
							goodVo.goodsSpecId === item.goodsSpecId,
					);
					if (!good) {
						repairGoodsVos.value.repairGoodsVos.push({
							videoPaths: [],
							code: '',
							descr: '',
							goodsId: item.goodsId,
							goodsName: item.goodsName,
							goodsSpecId: item.goodsSpecId,
							goodsSpecName: item.goodsSpecName,
							path: [],
							isShow: false,
							imgarr: [],
							refister: '',
							userPhone: '',
							userName: '',
							province: '',
							city: '',
							area: '',
							town: '',
							address: '',
						});
					}
				});
			}
		},
	);
	onUnload(() => {
		uni.hideLoading();
	});
</script>

<style lang="scss" scoped>
	.video-upload-container {
		width: 140rpx;
		height: 140rpx;
		border: 2rpx solid rgb(238, 238, 238);
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video-preview-container {
		width: 140rpx;
		height: 140rpx;
		position: relative;

		.content {
			width: 140rpx;
			height: 140rpx;
		}
		
		.del-icon {
			position: absolute;
			top: 0;
			right: 0;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.3);
		}
	}

	:deep(.htz-image-upload-list) {
		.htz-image-upload-Item {
			margin-left: 0 !important;
			border: 2rpx solid #eee;
		}
	}

	// 返厂地址
	.sel_address {
		font-size: 28rpx;
		color: #000;
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-left: 24rpx;
		box-sizing: border-box;

		.text_9 {
			color: #999;
			line-height: 42rpx;
		}

		.tipadd {
			display: flex;
			flex-wrap: wrap;
			word-wrap: break-word;
			word-break: break-all;
			justify-content: flex-end;
			text-align: right;

			.user_name {
				text-align: right;
			}
		}
	}

	.order_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100vw;
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.add_main {
			background-color: #fff;
			border-radius: 10rpx;
			width: 80vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 34rpx;
			box-sizing: border-box;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 0 20rpx;
				width: 100%;
				position: relative;

				.icon {
					position: absolute;
					right: 0rpx;
					font-weight: 500;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 0;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-top: 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx;
			}
		}

		:deep(.uni-searchbar__cancel) {
			color: #ffffff;
		}

		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 100%;

			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
				display: none;
			}

			.top-menu-view {
				display: flex;
				white-space: nowrap;
				width: 100%;
				background-color: #ffffff;
				height: 86rpx;
				line-height: 86rpx;
				border-bottom: 1rpx solid #d8dbe6;

				.menu-topic-view {
					display: inline-block;
					white-space: nowrap;
					height: 86rpx;
					position: relative;
					padding: 0rpx 10rpx;

					.menu-topic-text {
						font-size: 28rpx;
						color: #303133;
						margin: 0 20rpx;
						position: relative;
						z-index: 2;
						font-weight: bold;
						height: calc(100% - 4rpx);
					}

					.menu-topic-bottom {
						position: absolute;
						bottom: 4rpx;
						left: 0;
						right: 0;
						margin: 0 40rpx; //
						padding: 0rpx 10rpx;

						.menu-topic-bottom-color {
							width: 100%;
							height: 4rpx;
						}
					}

					.menu-topic-act {
						.menu-topic-text {
							color: #007cff;
						}

						.menu-topic-bottom {
							display: flex;
							justify-content: center;
						}

						.menu-topic-bottom-color {
							background: #007cff;
						}
					}
				}
			}

			.scroll_content {
				display: flex;
				flex: 1;
				flex-direction: column;
				height: 100%;

				.scroll-view_list {
					height: 100%;
					display: flex;
					flex: 1;
					flex-direction: column;

					box-sizing: border-box;

					.hint_text {
						background-color: #f2f9ff;
						font-size: 24rpx;
						color: #007cff;
						margin: 10rpx 0;
						padding: 12rpx 24rpx;
					}

					.swiper-box-list {
						margin-bottom: 24rpx;

						.pag_bottom {
							font-size: 28rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							row-gap: 30rpx;

							.truth {
								background-color: #fff;
								border-radius: 10rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								padding: 30rpx 24rpx;
								row-gap: 10rpx;

								.text_top_popup {
									text-align: center;
									font-size: 28rpx;
									font-weight: bold;
								}

								.onlogout {
									font-size: 28rpx;
									height: 80rpx;
									border-radius: 50rpx;
									line-height: 80rpx;
									width: 100%;
									color: #fff;
									background-color: #007cff;
								}

								:deep(.is-input-border) {
									border-radius: 50rpx !important;
									padding: 10rpx;
									margin: 20rpx 0 20rpx;
									// border: none;
									height: 80rpx !important;
									line-height: 80rpx;
									font-size: 28rpx;
								}
							}

							.fac_header_add {
								height: 160rpx;
								background-color: #f2f9ff;
								border: 1px solid #007cff;
								border-radius: 10rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								color: #007cff;
							}
						}
					}

					.centent_bgBox {
						padding-bottom: 220rpx;

						:deep(.uni-forms-item__label) {
							padding: 0;
							font-size: 28rpx;
							height: auto;
						}

						.item_fee {
							background-color: #fff;
							padding: 24rpx;
							margin-bottom: 24rpx;

							.title_heade {
								padding: 12rpx 0;
							}

							:deep(.uni-forms-item) {
								margin-bottom: 0rpx;
								padding: 16rpx 0;
								border-bottom: 1px solid #eee;

								.uni-forms-item__error {
									left: auto;
									right: 0;
									padding-top: 2rpx;
								}
							}

							:deep(.uni-select) {
								border: none;

								.uni-select__input-placeholder {
									text-align: right;
									margin-right: 12rpx;
									font-size: 28rpx;
									color: #999;
								}

								.uni-select__input-text {
									text-align: right;
									margin-right: 12rpx;
									font-size: 28rpx;
								}

								.uni-popper__arrow {
									left: 66%;
								}

								.uni-select__selector {
									top: 100%;
								}
							}

							&_tableHead {
								display: flex;
								align-items: center;
								justify-content: space-between;

								&_left {
									font-size: 28rpx;
									font-weight: bold;
									display: flex;
									align-items: center;
									flex: 1;

									.down_up {
										width: 0;
										height: 0;
										border-right: 10rpx solid transparent;
										border-left: 10rpx solid transparent;
										border-top: 14rpx solid #000;
										margin-right: 6rpx;
									}

									.down_up_ {
										width: 0;
										height: 0;
										border-right: 10rpx solid transparent;
										border-left: 10rpx solid transparent;
										border-bottom: 14rpx solid #000;
										margin-right: 6rpx;
									}
								}
							}

							.item_content {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								height: 100%;
								margin-left: 24rpx;

								// border-bottom: 1px solid #eee;
								:deep(.checklist-box) {
									margin-left: 40rpx;
									margin-right: 0;

									.checklist-text {
										font-size: 28rpx;
									}
								}

								.input_pl {
									color: #999;
									width: 100rpx;
									font-size: 28rpx;
								}

								.content_name {
									flex: 1;
									text-align: right;
									width: 300rpx;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
									margin-right: 12rpx;
									font-size: 28rpx;
								}

								.input_with_span {
									display: flex;
									align-items: center;
								}

								:deep(.input_with) {
									.uni-easyinput__content {
										width: 220rpx !important;
									}
								}
							}

							.text_input {
								margin: 10rpx 0 0 0;
								position: relative;

								:deep(.uni-easyinput__content-textarea) {
									margin: 0;
									// background-color: #fff !important;
								}

								padding: 12rpx 12rpx 24rpx;
								background-color: #fff;
								border: 2rpx solid rgb(243, 244, 248);

								.coun {
									font-size: 22rpx;
									position: absolute;
									right: 12rpx;
									bottom: 6rpx;
									color: #999;
								}
							}

							.pic_img {
								:deep(.file-title) {
									font-size: 28rpx;
								}

								:deep(.uni-file-picker__header) {
									// padding-top: 24rpx;
									padding-bottom: 10rpx;
								}

								:deep(.icon-add) {
									width: 30rpx;
									height: 3rpx;
									background-color: #aaa;
								}

								:deep(.icon-del) {
									width: 24rpx;
								}

								:deep(.icon-del-box) {
									width: 40rpx;
									height: 40rpx;
									top: 0;
									right: 0;
									background-color: rgba(0, 0, 0, 0.3);
								}

								:deep(.uni-progress-bar) {
									display: none;
								}
							}
						}
					}
				}
			}

			.footer_order {
				display: flex;
				align-items: center;
				background-color: #ffffff;
				z-index: 99;
				height: 140rpx;
				position: fixed;
				bottom: 0;
				width: 100%;
				padding: 48rpx 48rpx 60rpx;
				box-sizing: border-box;
				border-top: 1px solid #eee;

				&_left {
					width: 50%;
					display: flex;
					// justify-content: center;
					align-items: center;
					font-size: 24rpx;
					margin-right: 24rpx;

					.gray_tip {
						color: #007cff;
						font-weight: bold;
						padding: 0 10rpx;
						font-size: 28rpx;
					}
				}

				&_right {
					width: 50%;
					border-radius: 45rpx;
					height: 80rpx;
					background-color: #007cff;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
